<template>
  <div style="width:100%">
    <div style="text-align:left;line-height:30px;">
      <div style="border-bottom: 1px solid #dddddd">
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" plain @click="showRoleUserAddTableDialog" v-show="permissions.indexOf('fmRoleUserAdd')>0">添加用户</el-button>
        <el-button type="danger" size="mini" icon="el-icon-remove-outline" plain @click="showRoleUserDeleteConfirm" v-show="permissions.indexOf('fmRoleUserDelete')>0">移除用户</el-button>
        <el-button type="info" size="mini" icon="el-icon-d-arrow-right" plain @click="userToRole" v-show="permissions.indexOf('fmRoleUserToRole')>0">角色列表</el-button>
      </div>
    </div>
    <div style="height:10px"></div>
    <yfu-ptable :param="param" v-on:getCheckedRows="getRows" ref="demoTable1"></yfu-ptable>
    <roleUserAddTable :roleUserAddTableDialog="roleUserAddTableDialog"  v-on:on-result-change="roleUserAddTableDialogchange" v-on:on-refresh-change="refreshRoleUserTable"></roleUserAddTable>
  </div>
</template>
<script >
  import { getRoleUserList, deleteRoleUser } from '@/view/api/roleManager.js'
  import roleUserAddTable from '@/view/roleManager/roleUserAddTable.vue'
  import { yfuConfirm, yfuErrorToast, yfuSuccessToast } from '@/utils/yfuMessage.js'
  import getPermissionByMenuId from '@/utils/MenuPermissionUtils.js'
  export default {
    components: {
      'roleUserAddTable': roleUserAddTable
    },
    data () {
      return {
        permissions: '',
        roleId: undefined,
        roleUserAddTableDialog: false,
        checkedrows: [],
        param: {
          showBox: true,
          noCreatedRequest: 1,
          baseURL: process.env.BASE_API,
          url: getRoleUserList.url,
          urlParam: {
            roleId: undefined
          },
          showToolButton: true,
          toolSearchSpan: 20,
          toolSearchItems: [
            {
              label: '用户名',
              prop: 'userName',
              type: 'input',
              span: 6
            }, {
              label: '真实姓名',
              prop: 'trueName',
              type: 'input',
              span: 6
            }, {
              label: '创建用户',
              value: 'createUser',
              type: 'input',
              span: 6
            }
          ],
          showOperateRow: false,
          rows: [
            {
              prop: 'userName',
              label: '用户名',
              width: '100px'
            },
            {
              prop: 'trueName',
              label: '真实姓名',
              width: '100px'
            },
            {
              prop: 'status',
              label: '状态',
              width: '100px',
              formatter: function (row, column) {
                if (row.status === 0) {
                  return '已禁用'
                } else if (row.status === 1) {
                  return '已启用'
                } else {
                  return '未知'
                }
              }
            }, {
              prop: 'createUser',
              label: '创建用户',
              width: '100px'
            }, {
              prop: 'createTime',
              label: '创建时间'
            }
          ]
        }
      }
    },
    props: ['faterCurrentRole', 'menuId'],
    created: function () {
      let cThis = this

      getPermissionByMenuId(this.sessiongetJSON('user').id, this.menuId, function (permissionString) {
        cThis.permissions = permissionString
      })
    },
    methods: {
      // 得到所有选中行
      getRows (row) {
        this.checkedrows = row
      },
      // 刷新TABLE界面
      refresh () {
        this.$refs.demoTable1.refreshTable({'pageSize': 10})
      },
      tableSearch () {
        this.refresh()
      },
      roleUserAddTableDialogchange (val) {
        this.roleUserAddTableDialog = val
      },
      // 展示添加用户
      showRoleUserAddTableDialog () {
        let row = {}
        row.id = this.roleId
        this.$emit('showRoleAddUser', row)
      },
      // refreshRoleUserTable
      refreshRoleUserTable (row) {
        this.roleId = row.id
        this.param.urlParam.roleId = this.roleId

        // 刷新表
        this.refresh()
      },
      showRoleUserDeleteConfirm () {
        let cThis = this

        console.log(this.checkedrows)
        if (this.checkedrows == null || this.checkedrows.length === 0) {
          yfuErrorToast('请选中一行')
          return
        }

        let userIds = []
        this.checkedrows.forEach((user, index) => {
          userIds.push(user.id)
        })

        let params = {}
        params.roleId = this.roleId
        params.userIds = userIds.join()

        yfuConfirm('是否从角色中移除？', () => {
          deleteRoleUser(params,
            function (data) {
              console.log(data)
              yfuSuccessToast('移除用户成功！')
              // 刷新表
              cThis.refresh()
            },
            function (error) {
              console.log(error)
            }
          )
        })
      },
      userToRole () {
        let cThis = this
        cThis.$emit('userToRole')
      },
      showRoleUserStartUserConfirm () {
        console.log(this.checkedrows)
        if (this.checkedrows == null || this.checkedrows.length === 0) {
          yfuErrorToast('请选中一行')
          return
        }
        yfuConfirm('是否启用用户？', () => {
          // tfget提交
          // 刷新表
          this.refresh()
        })
      }
    }
  }
</script>
<style scoped>

.roleTableHeadCss {
  background-color: gray
}

</style>
